<template>
  <div>
    <div class="head">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/SchoolInfo' }">信息管理</el-breadcrumb-item>
        <el-breadcrumb-item>院校信息</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="content">
      <el-card>
        <div slot="header" class="dictionaryCardTitle">
          <p style="width:80px;text-align: center;">院校信息</p>
          <div class="dictiomarySelectDiv">
              <div class="selectName" style="margin-left:5px;"><p style="text-align: center;">院校名称</p><el-input placeholder="请输入字典名称"></el-input></div>
              <div class="selectName"><p style="text-align: center;">院校类型</p><el-input placeholder="请输入字典类型"></el-input></div>
              <div class="selectName">
                <p style="text-align: center;">院校状态</p>
                <el-select  v-model="dValue" placeholder="字典状态" style="margin-left:10px;">
                  <el-option label="正常" value="true"></el-option>
                  <el-option label="异常" value="false"></el-option>
                </el-select>
              </div>
              <div class="selectButton">
                <el-button type="primary" icon="el-icon-search" circle></el-button>
              </div>
            </div>
        </div>
        <el-table :data="dicData" style="width: 100%" border max-height="380">
          <el-table-column fixed prop="sid" label="编号">
          </el-table-column>
          <el-table-column prop="sname" label="院校名称" :width="flexColumnWidth('sname',dicData)">
          </el-table-column>
          <el-table-column prop="snameUrl" label="院校链接" :width="flexColumnWidth('snameUrl',dicData)">
          </el-table-column>
          <el-table-column prop="stype" label="院校类型" :width="flexColumnWidth('stype',dicData)">
          </el-table-column>
          <el-table-column prop="slocation" label="所在地" :width="flexColumnWidth('slocation',dicData)">
          </el-table-column>
          <el-table-column prop="subjection" label="院校隶属" :width="flexColumnWidth('subjection',dicData)">
          </el-table-column>
          <el-table-column prop="snoticeUrl" label="网报公告链接" :width="flexColumnWidth('snoticeUrl',dicData)">
          </el-table-column>
          <el-table-column prop="swayUrl" label="调剂办法" :width="flexColumnWidth('swayUrl',dicData)">
          </el-table-column>
          <el-table-column prop="sadviceUrl" label="在线咨询链接" :width="flexColumnWidth('sadviceUrl',dicData)">
          </el-table-column>
          <el-table-column prop="swayUrl" label="招生简章链接" :width="flexColumnWidth('swayUrl',dicData)">
          </el-table-column>
          <el-table-column prop="zip" label="状态" width="100"
            :filters="[{ text: '正常', value: '正常' }, { text: '禁用', value: '禁用' }]">
            <div slot-scope="scope">
              <el-tag type="success" v-show="scope.row.schoolState==1">正常</el-tag>
              <el-tag type="danger" v-show="scope.row.schoolState!==1">禁用</el-tag>
            </div>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <div slot-scope="scope">
              <el-button type="text" size="small">查看</el-button>
              <el-button type="text" size="small">编辑</el-button>
            </div>
          </el-table-column>
        </el-table>
        <el-pagination style="margin-top:20px;" 
        background 
        layout="prev, pager, next" 
        :total=package
        @current-change="schoolInfoPage"
        >
        </el-pagination>
      </el-card>
    </div>
  </div>
</template>
<script>
import Axios from 'axios';

export default ({
  methods: {
    schoolInfoPage(currentPage){
    const that=this
    Axios.get(that.localhost+'/school/findAll/'+currentPage+'/10').then(
      function(res){
        that.dicData=res.data.content;
        that.package=res.data.totalPages*15;
        // console.log(res.data.totalPages*10);
      }
    )
        // alert(currentPage);

    },
    flexColumnWidth(str, arr1, flag = 'max') {
      // str为该列的字段名(传字符串);tableData为该表格的数据源(传变量);
      // flag为可选值，可不传该参数,传参时可选'max'或'equal',默认为'max'
      // flag为'max'则设置列宽适配该列中最长的内容,flag为'equal'则设置列宽适配该列中第一行内容的长度。
      str = str + ''
      let columnContent = ''
      if (!arr1 || !arr1.length || arr1.length === 0 || arr1 === undefined) {
        return
      }
      if (!str || !str.length || str.length === 0 || str === undefined) {
        return
      }
      if (flag === 'equal') {
        // 获取该列中第一个不为空的数据(内容)
        for (let i = 0; i < arr1.length; i++) {
          if (arr1[i][str].length > 0) {
            // console.log('该列数据[0]:', arr1[0][str])
            columnContent = arr1[i][str]
            break
          }
        }
      } else {
        // 获取该列中最长的数据(内容)
        let index = 0
        for (let i = 0; i < arr1.length; i++) {
          if (arr1[i][str] === null) {
            return
          }
          const now_temp = arr1[i][str] + ''
          const max_temp = arr1[index][str] + ''
          if (now_temp.length > max_temp.length) {
            index = i
          }
        }
        columnContent = arr1[index][str]
      }
      // console.log('该列数据[i]:', columnContent)
      // 以下分配的单位长度可根据实际需求进行调整
      let flexWidth = 0
      for (const char of columnContent) {
        if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {
          // 如果是英文字符，为字符分配8个单位宽度
          flexWidth += 6
        } else if (char >= '\u4e00' && char <= '\u9fa5') {
          // 如果是中文字符，为字符分配15个单位宽度
          flexWidth += 15
        } else {
          // 其他种类字符，为字符分配8个单位宽度
          flexWidth += 8
        }
      }
      if (flexWidth < 80) {
        // 设置最小宽度
        flexWidth = 100
      }
      // if (flexWidth > 250) {
      //   // 设置最大宽度
      //   flexWidth = 250
      // }
      return flexWidth + 'px'
    }
  },
  created(){
    const that=this
    Axios.get(that.localhost+'/school/findAll/1/10').then(
      function(res){
        that.dicData=res.data.content;
        that.package=res.data.totalPages*10;
        // console.log(res.data.totalPages*10);
      }
    )
  },
  data() {
  return {
    localhost:this.global.localhost,
    dicData: [],
    dValue:"",
    package:100
  }
},
  })
</script>
      
<style scoped>
.content>>>.el-card>>>.el-table{
    overflow-x: hidden;
  }
.el-table{
  overflow-x: hidden;
}
.dictiomarySelectDiv .el-input{
  width: 160px;
  min-width: 160px;
  margin-left: 10px;
}
.dictiomarySelectDiv .el-select{
  min-width: 160px;
}
.dictionaryCardTitle{
  display: flex;
  width: 100%;
  justify-content: center;
  flex-direction: column;
  font-weight: 600;
}
.dictiomarySelectDiv{
  width: 100%;
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.selectName{
  display: flex;
  margin-left: 8px;
  align-items: center;
}
.selectName p{
  min-width: 70px;
}
.selectButton{
  margin-left: 30px;
}
.tableView{
  min-width: 100%;
}
.dictionaryCardTitle {
  display: flex;
  width: 100%;
  justify-content: center;
  flex-direction: column;
  font-weight: 600;
}
/* .dictiomarySelectDiv{
  display: flex;
}
.selectName{
  display: flex;
  flex-direction: row;
  width: auto;
} */
.el-table__column-filter-trigger{
  display: flexbox;
}

</style>